<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">abc</div>
    <div id="id">def</div>
    <input type="text" value="播放">

    <input type="checkbox" id="all">我全都要 <br>
<input type="checkbox" class="girl">貂蝉 <br>
<input type="checkbox" class="girl">小乔 <br>
<input type="checkbox" class="girl">安琪拉 <br>
<input type="checkbox" class="girl">妲己 <br>


</body>
<script lang="ts">
    var elem1 = document.querySelector('.box');
    console.log(elem1);
    let string = 'def';
    elem1.onclick = (e) => {
        // console.log(e);
        console.log('点击了元素');
        // elem1.innerText = string;
        elem1.innerHTML = `<table>
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
    <td>数据3</td>
  </tr>
  <tr>
    <td>数据4</td>
    <td>数据5</td>
    <td>数据6</td>
  </tr>
</table>`;
        elem1.style.color = 'red';
    };




    var elem2 = document.querySelector('#id');
    console.log(elem2);




    var elem3 = document.querySelector('input');
    console.log(elem3);
    elem3.onclick = (e) =>{
        if(elem3.value == '播放'){
            elem3.value = '暂停'
        }else{
            elem3.value = '播放'
        }
        console.log(e);
    }









    let all = document.querySelector('#all');
    let girls = document.querySelectorAll('.girl');
    all.onclick = () =>{
        for (let i = 0; i< girls.length; i++) {
            if(all.checked == true){
                girls[i].checked = true;
            }else{
                girls[i].checked = false;
            }
        }
    }
    for (let i = 0; i < girls.length; i++) {
        girls[i].onclick = () =>{
                all.checked = checkGirls(girls);
        }
    }
    function checkGirls(girls) {
    for (var i = 0; i < girls.length; i++) {
            if (!girls[i].checked) {
                // 只要一个 girl 没被选中, 就认为结果是 false(找到了反例)
                return false;
           }
       }
        // 所有 girl 中都没找到反例, 结果就是全选中
        return true;
   }
</script>

</html>